<template>
  <div>
    <el-card>
      <template #header> 商品列表 </template>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="{ row }">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品ID">
                <span>{{ row.id }}</span>
              </el-form-item>
              <el-form-item label="所属分类">
                <span>{{ row.category }}</span>
              </el-form-item>
              <el-form-item label="商品图片">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="row.imgUrl"
                ></el-image>
              </el-form-item>
              <el-form-item label="商品评价">
                <span>{{ row.rating }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{{ row.goodsDesc }}</span>
              </el-form-item>
              <el-form-item label="店铺名称">
                <span>{{ row.name }}</span>
              </el-form-item>
              <el-form-item label="商品价格">
                <span>{{ row.price }}</span>
              </el-form-item>
              <el-form-item label="创建时间">
                <span>{{ row.ctime | YMDHms }}</span>
              </el-form-item>
              <el-form-item label="商品销量">
                <span>{{ row.sellCount }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="name"> </el-table-column>
        <el-table-column label="所属分类" prop="category"> </el-table-column>
        <el-table-column label="商品价格" prop="price"> </el-table-column>
        <el-table-column label="商品图片" prop="imgUrl">
          <template #default="{ row }">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.imgUrl"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
        <el-table-column label="操作" width="150px">
          <template #default="{ row }">
            <el-button size="small" type="primary" @click="openDrawer(row)"
              >编辑</el-button
            >
            <el-button size="small" type="danger" @click="removeGoods(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="mt20"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <el-drawer
      title="编辑商品"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      :visible.sync="dialog"
    >
      <div class="demo-drawer__content">
        <el-form
          class="content-form"
          label-width="80px"
          style="width: 300px"
          :model="formData"
        >
          <el-form-item label="商品名称">
            <el-input autocomplete="off" v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
            <el-select
              placeholder="请选择商品分类"
              value="请选择商品分类"
              v-model="formData.category"
            >
              <el-option
                v-for="item in category"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <span>{{ formData.ctime | YMDHms }}</span>
          </el-form-item>
          <el-form-item label="商品图片">
            <el-image
              style="width: 100px; height: 100px"
              :src="formData.imgUrl"
            ></el-image>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input-number
              v-model="formData.price"
              :min="1"
              :max="10"
              label="描述文字"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="商品描述">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="formData.goodsDesc"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm" :loading="loading">取 消</el-button>
          <el-button type="primary" @click="editGoods">{{
            loading ? "提交中 ..." : "确 定"
          }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>


<script>
import { api_goods_categories } from "@/api/goods";
import { api_goods_del, api_goods_edit, api_goods_list } from "@/api/user";

export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 10,
      pageSize: 3,
      dialog: false,
      formData: {
        category: "",
      },
      num: 0,
      dialog: false,
      loading: false,
      category: [],
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getGoodsList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getGoodsList();
    },
    // 获取列表
    async getGoodsList() {
      let res = await api_goods_list({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
      let { total, data } = res.data;
      this.tableData = data;
      this.total = total;
    },
    openDrawer(row) {
      console.log(row);
      this.dialog = true;
      this.formData = { ...row };
    },

    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    // 点击抽屉里面的确认按钮修改商品信息
    async editGoods() {
      let res = await api_goods_edit(this.formData);
      let { code } = res.data;
      if (code === 0) {
        this.dialog = false;
        this.getGoodsList();
      }
    },
    // 点击删除，删除商品
    async removeGoods(id) {
      let res = await api_goods_del({ id });
      this.getGoodsList();
    },
    async handleGoodsList() {
      let res = await api_goods_categories();
      let { data } = res;
      this.category = data;
    },
  },
  created() {
    this.getGoodsList();
    this.handleGoodsList();
  },
};
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.content-form,
.demo-drawer__footer {
  padding: 0px 20px;
}
</style>